<template>
  <div class="user-blacklist">
    <p class="black-title">我的黑名单</p>
    <c-user-book-list :operation="true" :bookList="allBook.list" @removeitem="removeItem"/>
    <el-pagination class="all-book-pagination" v-if="allBook.total > 0"
      background
      layout='prev, pager, next, jumper, ->, total'
      :total="allBook.total"
      :current-page.sync="pageParam.curr"
      :page-size.sync="pageParam.limit"
      @current-change="handlerPageChange">
    </el-pagination>
  </div>
</template>

<script>
import cUserBookList from '../../components/user/UserBookList.vue';

export default {
  components:{
    cUserBookList
  },
  data(){
    return {
      pageParam:{
        curr:1,
        limit:10
      },
      allBook:{
        list:[],
        total:0
      }
    }
  },
  created(){
    this.listBlacklist();
  },
  methods:{
    listBlacklist(){
      this.$http.postForm('/user/listBlackListByPage', this.pageParam, res => {
        this.allBook.list = res.list;
        this.allBook.total = parseInt(res.total);
      });
    },
    handlerPageChange(currentPage){
      this.pageParam.curr = currentPage;
      this.listBlacklist();
    },
    removeItem(bookId){
      this.$http.postForm('/user/removeFromBlacklist', {bookId}, res=>{
        if(this.allBook.list.length <= 1 && this.pageParam.curr > 1){
          this.pageParam.curr--;
        }
        this.listBlacklist();
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.user-blacklist {
  padding: 10px 30px 30px 30px;
  .black-title {
    color: $base-color;
    font-size: 20px;
    line-height: 30px;
  }
  .all-book-pagination {
    margin: 15px 0;
  }
}
</style>